import React, { FC, memo } from "react";
import { IHotRecommendResult } from "@/views/discover/c-views/recommend/store/type";
import { MenuItemWrapper } from "@/components/song-menu-item/style";
import { formatCount, getImageSize } from "@/utils/format";

interface IProps {
  children?: React.ReactNode;
  key?: number;
  itemData?: IHotRecommendResult;
}

const SongMenuItem: FC<IProps> = (props) => {
  const { itemData } = props;
  return (
    <MenuItemWrapper>
      <div className="top">
        <img src={getImageSize(itemData?.picUrl!, 140)} alt="" />
        <div className="cover sprite_cover">
          <div className="info sprite_cover">
            <span>
              <i className="sprite_icon headset"></i>
              <span className="count">{formatCount(itemData?.playCount!)}</span>
            </span>
            <i className="play sprite_icon"></i>
          </div>
        </div>
      </div>
      <div className="bottom">{itemData?.name}</div>
    </MenuItemWrapper>
  );
};

export default memo(SongMenuItem);
